<template>
  <q-card class="bg-primary full-height" v-if="editJob">
    <q-banner class="bg-primary" style="height: 10vh">
      <div class="full-width row justify-between text-white">
        <div class="col-10 row justify-between text-weight-bolder text-h4 text-right">
          <span class="col-3">
            <q-input dense v-model="editJob.title" label="岗位名称" class="q-px-xs bg-white rounded-borders"/>
          </span>
          <span class="col-3">
            <q-input dense v-model="editJob.salary" label="薪酬" class="q-px-xs bg-white rounded-borders"/>
          </span>
          <span class="col-2">
            <q-input dense v-model="editJob.location" label="公司地址" class="q-px-xs bg-white rounded-borders"/>
          </span>
          <span class="col-3">
            <q-input dense v-model="editJob.company" label="公司名称" class="q-px-xs bg-white rounded-borders"/>
          </span>
        </div>
        <div class="col-2">
          <div class="text-right">
            <q-btn label="保存" class="bg-white text-primary" @click="saveJobPost"/>
          </div>
        </div>
      </div>
      <div class="q-mt-sm">
        <q-input dense v-model="editJob.requirements" label="要求" class="q-px-xs bg-white rounded-borders"/>
      </div>
      <q-separator class="q-my-md" color="white"/>
    </q-banner>
    <q-card-section class="q-pa-none q-mx-md q-my-md">
      <div class="text-left bg-white rounded-borders description">
        <q-input v-model="editJob.description" label="详细描述" type="textarea" v-if="type !== 'read'" borderless input-style="height: 75vh; resize: none; padding: 0;"/>
      </div>
    </q-card-section>
  </q-card>
</template>
<style scoped lang="sass">
.requirements
  font-size: 16px
  font-weight: bolder
.description
  border: 1px solid #ccc
  border-radius: 10px
  font-size: 16px
</style>
<script setup lang="ts">
import {JobPost} from "../vite-env.d";
import {getCurrentInstance, ref, watch} from "vue";
const props = defineProps({
  jobPost: Object as JobPost,
  type: String as 'edit' | 'new' | 'read'
})
const instance = getCurrentInstance()
const editJob = ref<JobPost>({...instance?.proxy.jobPost})
watch(() => props.jobPost, (newJob) => {
  if (newJob)
    editJob.value = newJob
  else
    if (instance?.proxy.type === 'new') {
      editJob.value = {
          id: null,
          title: '',
          company: '',
          location: '',
          salary: '',
          description: '',
          requirements: ''
      }
    }
})
const emit = defineEmits(['update']);
const saveJobPost = () => {
  emit('update', {type: props.type, jobPost: {...editJob.value}});
}
</script>